<template>
  <div class="m-table" :style="wrapperStyle" :class="className">
    <Table
      :dataSource="data"
      :columns="columns"
      :scroll="scroll"
      :rowSelection="rowSelection"
      :loading="loading"
      :rowKey="rowKey"
      :pagination="tablePagination"
      @change="onChange"
    >
      <!-- 表头插槽 -->
      <template
        v-for="column in columns"
        :slot="column.slots ? column.slots.title : ''"
      >
        <slot :name="column.slots ? column.slots.title : ''"></slot>
      </template>
      <template
        v-for="column in columns"
        :slot="column.scopedSlots ? column.scopedSlots.customRender : ''"
        slot-scope="text, record"
      >
        <slot
          :name="column.scopedSlots ? column.scopedSlots.customRender : ''"
          v-bind="{ text, record }"
        ></slot>
      </template>
    </Table>
  </div>
</template>

<script>
import { Table } from "ant-design-vue";
export default {
  name: "m-table",
  props: [
    "data",
    "columns",
    "rowSelection",
    "scroll",
    "className",
    "loading",
    "rowKey",
    "pagination",
    "onChange",
    "wrapperStyle",
  ],
  components: { Table },
  computed: {
    tablePagination() {
      return this.pagination === false
        ? false
        : {
            ...(this.pagination || { pageSize: 15, current: 1 }),
            showTotal: (total) => {
              return `共${total}条`;
            },
            // showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: ["20", "50", "100"],
          };
    },
  },
};
</script>

<style scoped lang="less">
</style>
